<template>
  <div id="app">
      <transition name="component-fade" mode="out-in">
        <!-- 被缓存 -->
        <!-- <keep-alive v-if="$route.meta.keepAlive">
            <router-view class="child-view"></router-view>
        </keep-alive> -->
        <!-- 不被缓存 -->
        <!-- <router-view v-if="!$route.meta.keepAlive" class="child-view"></router-view> -->
        <router-view class="child-view"></router-view>
      </transition>
      <div v-wechat-title="$route.meta.title"></div>
  </div>
</template>
<script>
  // import FooterBar from './components/FooterBar'
  export default {
    components: {
      // FooterBar
    },
    data () {
      return {
        // transitionName: 'slide-left'
      }
    },
    watch: {
      '$route' (to, from) {
        // console.log(to.path)
        // if (to.path === '/admin/login' || to.path === '/admin/list') {
        // }
        // const toDepth = to.path.split('/').length
        // const fromDepth = from.path.split('/').length
        // this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
      }
    }
  }
</script>

<style>
.component-fade-enter-active, .component-fade-leave-active {
  transition: opacity .2s ease;
  -webkit-transition: opacity .2s ease;
}
.component-fade-enter, .component-fade-leave-to{
  opacity: 0;
}
</style>
